<script setup>
import OImage from "../setting/Images.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Editor from "../setting/Editor.vue";
import Slider from "../setting/Slider.vue";
import Color from "../setting/Color.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]);

const form = ref({
  $position: { top: 145, left: 41 },
  $positionType: "absolute",
  $size: { width: 306, height: 375 },
  $removeable: true,
  type: "none",
  borderRadius: 10,
  color: "#333333",
  bgColor: "#ffffff",
  showBgImg: false,
  text: "",
  textPosition: { left: 15, top: 15 },
  textSize: { width: 270, height: 390 },
  prizePosition: { top: 100, left: 50 },
  prizeSize: { width: 200, height: 130 },
  goPrize: "./imagesStatic/activity/goprize.png",
  goPrizePosition: { top: 270, left: 90 },
  goPrizeSize: { width: 126, height: 57 },
  qrcodePosition: {
    left: 90,
    top: 180,
  },
  qrdodeSize: {
    width: 120,
    height: 120,
  },
  closeImg: "./imagesStatic/activity/close_icon.png",
  closePosition: {
    top: 385,
    left: 134,
  },
  closeImgSize: {
    width: 30,
    height: 30,
  },
});

const typeList = [
    { label: "无", key: "none" },
    { label: "富文本", key: "richText" },
    { label: "中奖弹窗", key: "winnerPrize" },
    { label: "未中奖弹窗", key: "thanksPrize" },
    { label: "分享海报", key: "sharePoster" },
  ],
  winnerPopup = {
    showBgImg: true,
    backgroundImg: "./imagesStatic/activity/winnerpopup_bg.png",
    bgColor: "",
    borderRadius: 0,
  },
  thanksPopup = {
    $position: { top: 194.94, left: 52.08 },
    $size: { width: 283, height: 347 },
    backgroundImg: "./imagesStatic/activity/thankspopup_bg.png",
    bgColor: "",
    borderRadius: 0,
    closePosition: { top: 357.38, left: 126.85 },
    prizePosition: { top: 130, left: 40 },
    prizeSize: { width: 200, height: 100 },
    showBgImg: true,
  },
  sharePoster = {
    $position: { top: 142.86, left: 41.67 },
    $size: { width: 300, height: 424 },
    backgroundImg: "./imagesStatic/activity/qrcode_bg.jpg",
    bgColor: "",
    borderRadius: 0,
    closePosition: { top: 444.05, left: 134.29 },
  };

const detail = computed({
  get: () => {
    if (props.config.type === "winnerPrize") {
      return Object.assign({}, form.value, winnerPopup, props.config);
    } else if (props.config.type === "thanksPrize") {
      return Object.assign({}, form.value, thanksPopup, props.config);
    } else if (props.config.type === "sharePoster") {
      return Object.assign({}, form.value, sharePoster, props.config);
    }
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const onChange = (val) => {
  detail.value = detail.value;
};

onMounted(() => {
  nextTick(() => {
    onChange();
  });
});
</script>
<template>
  <el-form :model="detail" :disabled="disabled" label-width="auto">
    <el-form-item label="弹窗类型">
      <el-select
        v-model="detail.type"
        placeholder="请选择"
        style="width: 200px"
        @change="onChange"
      >
        <el-option
          v-for="(item, key) in typeList"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
    </el-form-item>
    <AlphaColor v-model="detail.bgColor" name="背景色" @change="onChange" />
    <Slider
      v-model="detail.borderRadius"
      name="圆角"
      :max="20"
      @change="onChange"
    />
    <OImage
      v-model="detail.backgroundImg"
      v-model:size="detail.$size"
      v-model:show="detail.showBgImg"
      name="背景图片"
      @change="onChange"
    />
    <OImage
      v-model="detail.closeImg"
      v-model:size="detail.closeImgSize"
      name="关闭按钮"
      @change="onChange"
    />
    <OImage
      v-if="detail.type === 'winnerPrize'"
      v-model="detail.goPrize"
      v-model:size="detail.goPrizeSize"
      name="领奖按钮"
      @change="onChange"
    />
    <Color
      v-if="detail.type === 'winnerPrize' || detail.type === 'thanksPrize'"
      v-model="detail.color"
      name="文字颜色"
      @change="onChange"
    />
    <Editor
      v-if="detail.type === 'richText'"
      v-model="detail.text"
      name="富文本内容"
      @change="onChange"
    />
  </el-form>
</template>
